<script setup>
import Video from 'video.js'
import 'video.js/dist/video-js.css'
import { ref, onMounted, nextTick, inject, reactive } from 'vue'

const player = ref()
const $axios = inject('$axios')
const init = () => {
  player.value = Video(
    'my-video',
    {
      //视频源
      sources: [
        {
          src: 'https://assets.honqun.cn/video/v1.mp4',
          type: 'video/mp4',
        },
      ],
      //是否显示播放按钮
      bigPlayButton: true,
      playbackRates: [0.5, 1, 1.5, 2],
      controls: true,
      //设置小喇叭音量键
      controlBar: {
        fullscreenToggle: true,
        // 音量条的横向还是纵向显示
        volumePanel: {
          inline: false,
        },
      },
    },
    () => {
      player.value.on('play', () => {
        console.log('开始播放')
      })
      //设置默认2倍速
      player.value.playbackRate(1)
    }
  )
}
onMounted(async () => {
  await nextTick
  init()
  getVideoList()
})

let videoList = reactive([])

function getVideoList() {
  $axios.get('camera/listCameras').then(res => {
    videoList.arr = res.data.data

    videoList.arr.forEach((item, index) => {
      if (index === 0) {
        item.clicked = true
      } else {
        item.clicked = false
      }
    })
  })
}
function handleVideoListClicked(current) {
  videoList.arr.forEach(item => {
    if (item.tags === current.tags) {
      item.clicked = true
    } else {
      item.clicked = false
    }
  })

  player.value.src(current.url)
}
</script>

<template>
  <div class="videoBox">
    <div class="title">重点场所监控</div>

    <div class="box">
      <div class="left">
        <video
          id="my-video"
          ref="videoRef"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          width="100%"
          height="100%"
          style="height: 100%; width: 100%"
          data-setup="{}"
        >
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
          </p>
        </video>
      </div>
      <div class="right scroll">
        <div
          v-for="(item, index) in videoList.arr"
          :key="index"
          :class="['menu', item.clicked && 'menuActive']"
          @click="handleVideoListClicked(item)"
        >
          {{ item.tags }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.videoBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/home/boxbg1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box {
    flex: 1;
    margin: 29px 18px 27px 20px;
    display: flex;
    overflow: hidden;
  }

  .left {
    flex: 1;
    // width: 532px;
    // height: 299px;
    height: 100%;
  }
  .right {
    margin-left: 14px;
    min-width: 116px;
    height: 100%;
    overflow: hidden auto;

    .menu {
      width: 116px;
      height: 47px;
      background: rgba(0, 152, 221, 0.3);
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;

      &:not(:first-child) {
        margin-top: 16px;
      }

      &.menuActive {
        background: #0098dd;
      }
    }
  }
}
</style>
